<template>
	<view class="home">
		<view class="search-box">
			<image src="/static/images/localShop/icon_search.png" class="icon-search" mode=""></image>
			<input type="text" placeholder="请输入店铺名称" />
			<view class="screen-item">
				<text>筛选</text>
				<image src="/static/images/localShop/icon_screen.png" mode=""></image>
			</view>
		</view>
		<view class="shop-item" @click="handleDetail">
			<view class="shop-title">
				<image src="../user/static/share-info2.png" class="shop-logo" mode=""></image>
				<view class="shop-content">
					<view class="shop-name">中交第三航务工程勘察设计...</view>
					<view>
						<image src="/static/images/localShop/icon_dw.png" class="shop-dw" mode=""></image>
						<text class="shop-address">金汉绿港家园一区9号楼京汉生活广场3层</text>
					</view>
				</view>
				<image src="/static/images/localShop/icon_more.png" class="shop-more" mode=""></image>
			</view>
			<view class="shop-goods">
				<view class="goods-item">
					<image src="../user/static/share-info2.png" mode=""></image>
					<view>
						<text>易货价</text>
						<text>23.00</text>
					</view>
				</view>
				<view class="goods-item">
					<image src="../user/static/share-info2.png" mode=""></image>
					<view>
						<text>易货价</text>
						<text>23.00</text>
					</view>
				</view>
				<view class="goods-item">
					<image src="../user/static/share-info2.png" mode=""></image>
					<view>
						<text>易货价</text>
						<text>23.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			handleDetail(){
				uni.navigateTo({
					url:'/pages/product/shopDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		display: flex;
		align-items: center;
		padding: 30rpx 22rpx;
		font-size: 28rpx;
		background: #fff;
		border-top: 1rpx solid #F5F5F5;
		position: sticky;
		top: 0;
		z-index: 999;

		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.icon-search {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
		}

		.screen-item {
			color: #333;
			font-weight: 500;
			padding-left: 50rpx;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
		}

		.screen-item::before {
			content: "";
			width: 2rpx;
			height: 24rpx;
			background-color: #BCBCBC;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}

	.shop-item {
		background: #fff;
		border-radius: 12rpx;
		margin: 20rpx 24rpx;

		.shop-title {
			padding: 30rpx 20rpx;

			.shop-logo {
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
				float: left;
			}

			.shop-content {
				float: left;
				width: calc(100% - 180rpx);
				margin-left: 20rpx;
			}

			.shop-name {
				font-size: 32rpx;
				width: 100%;
				font-weight: 500;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.shop-address {
				font-size: 24rpx;
				color: #999;
				font-weight: 500;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.shop-dw {
				width: 28rpx;
				height: 28rpx;
				vertical-align: middle;
				margin-right: 5rpx;
			}

			.shop-more {
				width: 32rpx;
				height: 32rpx;
				float: right;
				margin-top: 20rpx;
			}
		}

		.shop-goods {
			margin: 0 20rpx;
			margin-top: 80rpx;
			padding: 30rpx 0rpx;
			border-top: 1px solid #f5f5f5;
			clear: both;

			.goods-item {
				display: inline-block;
				color: #ff0000;
				font-size: 20rpx;
				font-weight: 500;
				text-align: center;
				width: calc(100% / 3);

				text+text {
					font-size: 32rpx;
				}

				image {
					width: 190rpx;
					height: 190rpx;
				}
			}
		}
	}
</style>